<!-- 首页 -->
<template>
  <div>
    <h1>这是首页</h1>
    <div>
      <input type="text" placeholder="输入账号" v-model="phone" />
    </div>
    <div>
      <input type="text" placeholder="输入验证码" v-model="code" />
    </div>
    <div>
      <button @click="btn">确定</button>
    </div>
    <head1 :title="title"></head1>
    <div>
      <h2>姓名:{{ name }}</h2>
      <h2>年龄:{{ age }}</h2>
      <h2>数字:{{ num }}</h2>
      <h3>token:{{ token }}</h3>
      <button @click="add(-1)">-1</button>
      <button @click="add(1)">+1</button>
      <button @click="add1">异步加10</button>
    </div>
    <button @click="goAbout">去about页面</button>
  </div>
</template>

<script>
import { login } from "@/api/api";
import head1 from "../components/head.vue";
import { mapGetters } from "vuex";
export default {
  data() {
    return {
      phone: "18428197025",
      code: "6666",
      title: "123456",
    };
  },

  components: {
    head1,
  },

  computed: {
    ...mapGetters(["name", "age", "num", "token"]),
  },

  methods: {
    btn() {
      login({
        phone: this.phone,
        code: this.code,
      }).then(
        (res) => {
          if (res.status == 0) {
            this.$store.dispatch("user/setToken1", res.data).then(() => {
              console.log(this.token);
            });
          }
        },
        (err) => {
          console.log(err);
        }
      );
    },
    add(n) {
      this.$store.commit("test/add", n);
    },
    add1() {
      this.$store.dispatch("test/add1", 10);
    },
    goAbout() {
      this.$router.push({ path: "about" });
    },
  },

  created() {
    console.log(process.env);
    console.log(this.$store.state.test.name)
  },
};
</script>

<style lang='less' scoped>
</style>